<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        .left {
            background-color: antiquewhite;
            width: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 40px;
            font-family: 'Courier New', Courier, monospace;
        }

        .right {
            background-color: lightcoral;
            line-height: 200px;
            text-align: center;
            font-size: 40px;
            font-family: 'Courier New', Courier, monospace;
        }

        /* display:inline-block布局 */

        /* .container {
            
            font-size: 0;
        }

        .left {
            display: inline-block;
            width: 200px;
            vertical-align: top;
            margin-left: 10px;
        }

        .right {
            display: inline-block;

            width: calc(100% - 200px);
            vertical-align: top;
        } */

        /* 双float布局 */
        /* .container {
            overflow: hidden;
        }

        .left {
            width: 200px;
            float: left;
        }

        .right {
            width: calc(100% - 200px);
            float: left;
        } */

        /* float+BFC 布局 */
        
        /* .container {
            overflow: hidden;
        }

        .left {
            width: 200px;
            float: left;
        }

        .right {
            display: table-cell;
            width: 9999px;
        }  */

        /* float+margin 布局 */
        /* .container {
            overflow: hidden;
        }

        .left {
            width: 200px;
            float: left;
        }

        .right {
            margin-left: 200px;
        } */

        /* 左侧inline-block，右侧为float 布局 */
        /* .container {
            overflow: hidden;
        }

        .right {
            float: right;
            width: calc(100% - 200px);
        }

        .left {
            width: 200px;
            display: inline-block;
        } */

        /*左右均是绝对定位布局 */
        
        /* .container {
            position: relative;
            height: 200px;
        }

        .left {
            width: 200px;
            position: absolute;
        }

        .right {
            left: 200px;
            width: calc(100% - 200px);
            position: absolute;
        }  */

        /* 绝对定位+margin布局 */
        /* .container {
            position: relative;
            height: 200px;
        }

        .left {
            width: 200px;
            position: absolute;
        }

        .right {
            margin-left: 200px;
        }  */

        /* flex布局 */

        /* .container {
            display: flex;
        }

        .left {
            flex: 0 0 200px;
        }

        .right {
            flex: 1 1 0;
        } */

        /* grid布局 */

        .container {
            display: grid;
            /* 设置两列，左边固定宽度，右边占据剩余所有空间 */
            grid-template-columns: 200px 1fr;
        }
        
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>